<template>
  <el-row class="header-container clear-fix">
    <el-col :span="8" class="header-left hidden-xs-only">
      <i class="iconfont icon-caidan" @click="toggleAsideShow"></i>
    </el-col>
    <el-col :span="8" class="title hidden-md-and-down">Tsinglog后台管理系统</el-col>
    <el-col :span="8" class="header-right">
      <div class="dropdown-container">
        <DropDown :currentUserName="$store.state.currentUser.username"></DropDown>
      </div>
      <div
        class="hidden-md-and-down navmenu-container"
        v-if="hasPermission('comment:query') && hasPermission('comment:check')">
        <NavMenu></NavMenu>
      </div>
      <a class="go-portal" href="http://www.tsinglog.online/index">
        <i class="iconfont icon-diannao01"></i>
        <span class="hidden-lg-and-down">访问前台</span>
      </a>

    </el-col>
  </el-row>
</template>

<script>
  import DropDown from 'components/content/sidebar/subComponents/DropDown';
  import NavMenu from 'components/content/sidebar/subComponents/NavMenu';
  import {hasPermission} from "../../../common/permission";

  export default {
    name: "HeaderBar",
    components: {
      DropDown,
      NavMenu
    },
    data() {
      return {
        // currentUserName: 'admin'
      }
    },
    methods: {
      toggleAsideShow() {
        this.$store.commit("changeShowAside");
      },
      hasPermission(permission) {
        return hasPermission(permission);
      },
    }
  }
</script>

<style scoped>
  @import '~assets/fonts/iconfont.css';

  .header-container {
    display: inline-block;
    background: #6d7ee9;
    height: 60px;
    width: 100%;
    line-height: 60px;
    position: relative;
  }
  .header-left {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
  }
  .header-left i {
    margin-left: 20px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
  }
  .title {
    width: 400px;
    margin: 0 auto;
    text-align: center;
    margin: 0 auto;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .header-right {
    height: 60px;
    line-height: 60px;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    font-size: 16px;
  }

  .header-right .go-portal {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    transition: all 200ms;
    width: 20%;
    vertical-align: top;
    float: right
  }
  .header-right .go-portal:hover i {
    color: #66b1ff
  }
  .header-right .go-portal:hover span  {
    color: #66b1ff;
  }
  .header-right .go-portal:hover {
    cursor: pointer;
  }

  .header-right .go-portal i {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    font-size: 24px;
    vertical-align: middle;
    margin-right: 10px;
    color: #fff;
  }
  .header-right .go-portal span {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    width: 80px;
    color: #fff;
    font-size: 14px;
  }
  .header-right p {
    display: inline-block;
    vertical-align: bottom;
  }
  .dropdown-container {
    display: inline-block;
    width: 30%;
    float: right;
    vertical-align: top
  }
  .navmenu-container {
    display: inline-block;
    width: 10%;
    float:right
  }
</style>